<template>
  <img class="outer_container" :src="getStaticFileUrl(imgurl)" :style="{ width: imgwidth, height: imgheight }" @error="errorPhoto">
</template>
<script>
export default {
  name: 'PersonalImage',
  props: {
    // 图片展示高度
    imgheight: {
      type: String,
      required: false,
      default: '60px'
    },
    imgurl: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      imgwidth: ''
    };
  },
  created() {
    if (this.imgheight) {
      const currentHeight = this.imgheight.split('px')[0];
      const currentWidth = Number(currentHeight) / 7 * 5;
      this.imgwidth = currentWidth.toFixed() + 'px';
    }
  },
  methods: {
    // 获取后台图片
    getStaticFileUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/people.png');
      }
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = require('@/assets/images/people.png');
      img.onerror = null;
    }
  }
};
</script>
<style lang="scss" scoped>
.outer_container {
  display: inline-block;
  border: 1px solid #F0F0F0;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  padding: 0px;
  margin: 0px;
}
</style>
